<template>
    <div class="date-picker-content">
        <el-row :gutter="8">
            <el-col :span="9">
                <el-date-picker
                    v-model="times[0]"
                    style="width: 100%"
                    type="date"
                    value-format="YYYY-MM-DD"
                    :editable="false"
                    :disabled-date="disabledStartDate"
                    placeholder="开始时间" />
            </el-col>
            <el-col :span="2" class="date-picker-icon">⇀</el-col>
            <el-col :span="9">
                <el-date-picker
                    v-model="times[1]"
                    style="width: 100%"
                    :disabled="isLong == 1"
                    type="date"
                    value-format="YYYY-MM-DD"
                    :editable="false"
                    :disabled-date="disabledEndDate"
                    placeholder="结束时间" />
            </el-col>
            <el-col :span="3">
                <el-checkbox
                    v-model="isLong"
                    class="long-checkbox"
                    label="长期"
                    :true-label="1"
                    :false-label="2"
                    @change="longTremChange" />
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, withDefaults, watch } from 'vue';

interface Props {
    /** 时间 */
    modelValue?: Array<any>;
    startTime?: string;
    endTime?: string;
    /** 营业-BUSINESS_CERT， 身份证-RESIDENT */
    type?: string;
    /** 是否长期有效 1-是 2-否 */
    isLongTerm?: number;
    /** 是否禁用 */
    disabled?: boolean;
}
/**
 * 1.选择按钮样子
 * 2.form表单错误提示间距
 *
 */

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => ['', ''],
    startTime: '',
    endTime: '',
    type: 'BUSINESS_CERT',
    isLongTerm: 2,
    disabled: false
});

const emit = defineEmits(['update:modelValue', 'update:startTime', 'update:endTime', 'update:isLongTerm']);

const times: any = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const isLong = computed({
    get() {
        return props.isLongTerm;
    },
    set(val) {
        emit('update:isLongTerm', val);
    }
});

const disabledStartDate = (date: any) => {
    if (props.type == 'BUSINESS_CERT') {
        if (date.getTime() < new Date('1949-10-01').getTime()) {
            return true;
        }
    } else if (props.type == 'RESIDENT') {
        if (date.getTime() < new Date('1900-01-01').getTime()) {
            return true;
        }
    }
    // if (times.value[1]) {
    //     return (
    //         date.getTime() > Date.now() ||
    //         new Date(times.value[1]).getTime() - 60 * 24 * 60 * 60 * 1000 < date.getTime()
    //     );
    // } else {
    //     return false;
    // }
    return false;
};

const disabledEndDate = (date: any) => {
    if (props.type == 'BUSINESS_CERT') {
        if (date.getTime() < new Date('1949-12-01').getTime()) {
            return true;
        }
    } else if (props.type == 'RESIDENT') {
        if (date.getTime() < new Date('1900-03-01').getTime()) {
            return true;
        }
    }
    // if (times.value[0]) {
    //     return new Date(times.value[0]).getTime() + 60 * 24 * 60 * 60 * 1000 > date.getTime();
    // } else {
    //     return false;
    // }
    return false;
};

const longTremChange = val => {
    if (val == 2) {
        times.value[1] = '';
    }
};

watch(
    () => isLong.value,
    val => {
        if (val == 1) {
            times.value[1] = '2099-12-31';
        }
    }
);

defineOptions({
    name: 'ZwUnityKitDatePicker'
});
</script>
<style lang="scss" scoped>
.long-checkbox {
    margin-left: 4px;
}

.date-picker-icon {
    text-align: center;
}
</style>
